<template>
	<view class="set">
		<view class="navbar-wrap">
			<view class="navbar">
				<view class="navbar-group">
					<view class="navbar-item" v-for="(nav, index) in navs" :key="index" @tap="clickItem(nav)">
						<view class="navbar-item-header">
							<image class="icon" :src="nav.icon" mode="aspectFit"></image>
						</view>
						<view class="navbar-item-body">{{ nav.label }}</view>
					</view>
				</view>
			</view>
		</view>
		<view
			class="btns fix-bottom">
			<view class="btns-group">
				<view class="btns-item">
					<button class="btn" @tap="exit">退出登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {queryAppVersion} from '@/api/configure.js';
	import { deepClone, getToken, toLogin} from '@/util/util.js';
	import configUrl from '@/util/url.js';
	export default {
		data() {
			return {
				navs: [{
					icon: require('@/static/icon/icon_help.png'),
					label: '使用帮助',
					value: 'help'
				}, {
					icon: require('@/static/icon/icon_update.png'),
					label: '检查更新',
					value: 'update'
				},{
					icon: require('@/static/icon/icon_versions.png'),
					label: '当前版本号：0.1.0',
					value: 'versions'
				}],
				app_version: '',
				app_Local_version: '',
				update_content: '',
				platform: '',
				subDownloadUrl: ''
			}
		},
		methods: {
			exit() {
				this.$store.dispatch({type: 'logout'});
			},
			async clickItem(nav) {
				if(nav.value == 'update'){
					await this.getAppNewVersion();
								
					this.checkUpdate();
				}
			},
			async getAppNewVersion() {
				let data = {
					cityName: 'shenyang'
				}
				
				await queryAppVersion(data).then((res) => {
					this.app_version = res.data.versionCode;
					this.update_content = res.data.updateContent;
					this.subDownloadUrl = res.data.filePath;
				})
			},
			async getLocalAppVersion() {
				return await new Promise((resolve, reject) => {
					plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
						resolve(wgtinfo);
					});
				})
			},
			updeteApp() {
				let _this = this;
				
				uni.showModal({
					title: "版本更新",
					content: this.update_content, //更新描述
					confirmText: '立即更新',
					cancelText: '稍后进行',
					success: sucRes => {
						if (sucRes.confirm) {
							//如果是安卓直接更新下载
							if (_this.platform === 'android') {
								_this.doUpData();
							} else {}
						}
					}
				})
			},
			async getPlatform() {
				let _this = this;
				
				return await new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: function(e) {
							resolve(e);
						}
					})
				})
			},
			checkUpdate() {
				if (this.app_Local_version != this.app_version) {
					this.updeteApp();
				} else {
					uni.showToast({
						icon: 'none',
						title: '当前已是最新版本'
					})
				}
			},
			doUpData() {
				uni.showLoading({
					title: '更新中……'
				})
				uni.downloadFile({ //执行下载
					url: `${configUrl.Setting}${this.subDownloadUrl.substring(1)}` , //下载地址
					success: data => { //下载成功
						uni.hideLoading();
						if (data.statusCode == 200) {
							uni.showModal({
								title: '',
								content: '更新成功，确定现在安装吗？',
								confirmText: '安装',
								confirmColor: '#EE8F57',
								success: function(res) {
									if (data.statusCode === 200) {
										plus.runtime.install(data.tempFilePath, {
											force: true
										}, function(res) {
											utils.showToast('更新成功，重启中');
											plus.runtime.restart();
										});
									}
								}
							});
						}
					}
				});
			},
			
			setNavs() {
				this.navs.forEach( nav => {
					if(nav.value == 'versions'){
						nav.label = `当前版本号：${this.app_Local_version}`
					}
				})
			},
			async init() {
				let { version } = await this.getLocalAppVersion();
				
				this.app_Local_version = version;
				
				this.setNavs();
				
				let { platform } = await this.getPlatform();
				
				this.platform = platform;
			}
		},
		onLoad() {
			this.init();
		},
		onReady() {}
	}
</script>

<style lang="scss">
	.navbar-wrap{
		height: 96rpx;
		background-color: #3a8fed;
	}
	.btns {
		.btns-group {
			padding: 25rpx 167rpx 92rpx;
			.btns-item {
				.btn {
					height: 90rpx;
					padding: 23rpx 0rpx;
					border-radius: 90rpx;
					background-image: linear-gradient(to right, #44afee, #3a8eed);
					font-size: 36rpx;
					color: #ffffff;
					line-height: 44rpx;
				}
			}
		}
	}
	
	.fix-bottom {
		position: fixed;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
	}
	
	.navbar{
		position: absolute;
		top: 16rpx;
		right: 41rpx;
		bottom: 46rpx;
		left: 41rpx;
		background-color: #ffffff;
		padding: 70rpx 30rpx 0rpx;
		border-radius: 38rpx;
		box-sizing: border-box;
		.navbar-group{
			.navbar-item{
				display: flex;
				padding: 25rpx 27rpx 25rpx 27rpx;
				margin-bottom: 47rpx;
				border: 1rpx solid #e1e1e1;
				border-radius: 10rpx;
				align-items: center;
				.navbar-item-header{
					width: 43rpx;
					height: 45rpx;
					.icon{
						width: 43rpx;
						height: 45rpx;
					}
				}
				.navbar-item-body{
					width: calc(100% - 43rpx);
					padding: 3rpx 21rpx 3rpx 20rpx;
					font-size: 32rpx;
					line-height: 39rpx;
				}
			}
		}
	}
</style>
